import React, { useState } from 'react';

const AddEventForm = () => {
  const [eventData, setEventData] = useState({
    eventName: '',
    startDate: '',
    endDate: '',
    eventType: '公司活动',
    priority: '中',
    description: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // 处理表单提交
    console.log('提交的事件数据:', eventData);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setEventData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="add-event-modal">
      <div className="modal-header">
        <h3>添加事件</h3>
        <button className="close-btn">×</button>
      </div>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label>事件名称</label>
          <input
            type="text"
            name="eventName"
            value={eventData.eventName}
            onChange={handleChange}
            placeholder="王小明的生日"
          />
        </div>

        <div className="form-group">
          <label>开始日期</label>
          <input
            type="date"
            name="startDate"
            value={eventData.startDate}
            onChange={handleChange}
          />
        </div>

        <div className="form-group">
          <label>结束日期</label>
          <input
            type="date"
            name="endDate"
            value={eventData.endDate}
            onChange={handleChange}
          />
        </div>

        <div className="form-group">
          <label>事件类别</label>
          <select 
            name="eventType"
            value={eventData.eventType}
            onChange={handleChange}
          >
            <option value="公司活动">公司活动</option>
            <option value="个人事务">个人事务</option>
            <option value="会议">会议</option>
          </select>
        </div>

        <div className="form-group">
          <label>优先等级</label>
          <select
            name="priority"
            value={eventData.priority}
            onChange={handleChange}
          >
            <option value="高">高</option>
            <option value="中">中</option>
            <option value="低">低</option>
          </select>
        </div>

        <div className="form-group">
          <label>事件描述</label>
          <textarea
            name="description"
            value={eventData.description}
            onChange={handleChange}
            placeholder="补充性质的一些描述"
          />
        </div>

        <button type="submit" className="submit-btn">
          保存事件
        </button>
      </form>
    </div>
  );
};

export default AddEventForm;